<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人会员主页</title>
    <link rel="stylesheet" href="css/projectmain.css">
    <link rel="stylesheet" href="css/Register.css">
    <link rel="stylesheet" href="css/member.css">
    <link rel="stylesheet" href="css/card-list.css">
</head>
<body>
    <div class="main">
        <div class="head">
            <a href="http://www.wyzyz.org" class="logo">
                <img src="http://www.cflac.org.cn/zhiyuanzhe/image/logo.png" alt="">
            </a>
            <div class="topSearch">
                <form action="http://www.cflac.org.cn/was5/web/search" method="POST" accept-charset="UTF-8">
                    <input type="text" value="站内搜索..." class="input1">
                    <input type="image" class="btn1" src="http://www.wyzyz.org/images/topBtn.gif">
                </form>
            </div>
        </div>
        <div class="nav">
            <ul>
                <li><a href="http://www.wyzyz.org" class="aNow" style="width: 37px;">首 页</a></li>
                <li><a href="#" class="aNow">要闻资讯</a></li>
                <li><a href="#" class="aNow">精彩视频</a></li>
                <li><a href="#" class="aNow">品牌活动</a></li>
                <li><a href="#" class="aNow">各地联动</a></li>
                <li><a href="#" class="aNow">志愿者协会</a></li>
                <li><a href="#" class="aNow">名家公益</a></li>
                <li><a href="#" class="aNow">志愿之星</a></li>
                <li><a href="#" class="aNow">互动交流</a></li>
                <li><a href="#" class="aNow">资料下载</a></li>
            </ul>
        </div>

        <div class="main-content">
            <div class="main-header">
                <span class="member-name">个人简介</span>
                <button class="btn" style="float:right;">发送站内信</button>
            </div>
            <div class="main-con">
                <div class="img"></div>
                <div class="user-introduction">
                    <lable style="font-size:18px;color:#000">会员姓名:</lable><span style="margin-left:10px;font-size:18px;">李金斗</span><br>                    
                    <lable style="font-size:18px;color:#000">会员编号:</lable><span style="margin-left:10px;font-size:18px;">1101115021354</span><br>
                    <lable style="font-size:18px;color:#000">注册日期:</lable><span style="margin-left:10px;font-size:18px;">2017-01-12</span>       
                    <div class="pri-introduction">
                        <lable style="font-size:18px;color:#000">个人简介：</lable>
                        <div class="pri-introduction-con">
                            个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介
                        </div>
                    </div>             
                </div>
            </div>

            <div class="main-header">
                <span class="member-name">活动经历</span>
            </div>
            <div class="main-activ">
                <div class="part" style="padding:0;" id="card-panel">
                    <div class="card-list-wrapper"  style="position:relative;">
                        <div class="card-list-conl">
                            <div class="card-list-img">
                                <img id="current_img" src="img/face1.png">
                            </div>
                            <ul class="card-img-list">
                                <li class="card-list-item" style="margin-right:5px;"><img id="card-img-1" src="img/face1.png"></li>
                                <li class="card-list-item" style="margin-right:5px;"><img id="card-img-2" src="img/face2.png"></li>
                                <li class="card-list-item"><img data-target="add" id="card-img-3" src="icon/add.png"></li>
                            </ul>
                        </div>
                        <div class="card-list-conr" style="width:630px;">
                            <div class="content-title">
                                <lable class="title-lable">下乡送温暖 </lable>
                            </div>
                            <div class="content-con" style="width:628px;">
                                <div class="dp-detail">2017-01-12 北京市</div>
                                <div class="content-actcontent" style="height:105px;">
                                    <div class="content-detail" style="width:605px;">
                                        下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖下乡送温暖
                                    </div>
                                </div>
                                <!--<div class="content-title" style="margin-top:10px; font-size:16px;border-top:1px solid #bdbdbd;">评论：</div>  -->
                                <ul id="breContent" style="border-top:1px solid #bdbdbd;margin-top:10px;">
                                    <li>张文君： 真的非常好！下次也想参加这样的活动 2017-01-12</li>
                                </ul>
                                <i id="isExten" style="position:absolute;top:250px;left:450px;text-decoration:underline;" onclick="Shou_Hidden(moreContent , breContent)"><a href="#" style="color:#bdbdbd;">更多评论</a></i>                                 
                            </div>
                        </div>
                        <div class="more-content" id="moreContent" style="display:none;">
                            <div class="other-comment">
                                <lable class="other-name">王立军：</lable>
                                <input class="other-input" type="text">
                                <button class="btn-primary">评论</button>
                            </div>
                            <div class="other-comment" style="border-top:1px solid #bdbdbd;">
                                <ul>
                                    <li class="comment-item"><lable class="other-name">王立军：</lable><p class="other-comment-content">真的非常好！下次也想参加这样的活动 2017-01-12</p></li>
                                    <li class="comment-item"><lable class="other-name">王立军：</lable><p class="other-comment-content">真的非常好！下次也想参加这样的活动 2017-01-12</p></li>
                                    <li class="comment-item"><lable class="other-name">王立军：</lable><p class="other-comment-content">真的非常好！下次也想参加这样的活动 2017-01-12</p></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        



        <div class="footDiv">
            <div class="div0">
                <a href="#">联系咨询</a>|
                <a href="#">投诉建议</a>|
                <a href="#">文艺论坛</a>|
                <a href="#">职能部门</a>|
                <a href="#">团体会员</a>|
                <a href="#">组织结构</a>|
            </div>
            京ICP备14001194号　京公网安备11010502025171  中国文艺志愿者网　版权所有
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">

        function Shou_Hidden(trid1 , trid2){
            if(trid1.style.display == 'block'){
                trid1.style.display = 'none';
                trid2.style.display = 'block';
            }else{
                trid1.style.display = 'block';
                trid2.style.display = 'none';
            }
        }

        $("#card-img-1").mouseover(function(){
            $("#current_img").attr("src", $(this).attr("src")); 
        });

        $("#card-img-2").mouseover(function(){
            $("#current_img").attr("src", $(this).attr("src")); 
        });

        $("#card-img-3").mouseover(function(){
            $("#current_img").attr("src", "img/new.png"); 
        });

    </script>
    
</body>
</html>